<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/commons/taglibs.jsp" %>

<menu><fmt:message key="menu.system.title"/></menu>
<submenu><fmt:message key="SysMenu.title"/></submenu>
<title><fmt:message key="SysMenu.title"/></title>
<script src="${ctx}/assets/js/bootstrap-paginator.min.js"></script>
<form:form action="${ctx }/sysMenu/list" modelAttribute="query" id="queryForm" name="queryForm" method="post" style="display: inline;" class="form-horizontal">
	<table id="dynamic-table" class="table table-responsive table-striped table-bordered table-hover dataTable">
		<thead>
			<tr>
				<th style="width:1px;"> </th>
				<th data-name="menuName"><fmt:message key="SysMenu.menuName.title"/> </th>
				<th data-name="menuCode"><fmt:message key="SysMenu.menuCode.title"/> </th>
				<th data-name="menuUrl"><fmt:message key="SysMenu.menuUrl.title"/> </th>
				<th data-name="menuOrder"><fmt:message key="SysMenu.menuOrder.title"/> </th>
	
				<th><fmt:message key="navigation.label.operation"/></th>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${menuList}" var="item" varStatus="status">
				<tr>
					<td data-label="序号">${status.index + 1}</td>
					<td data-label="<fmt:message key="SysMenu.menuName.title"/>"><c:out value='${item.menuName}'/>&nbsp;</td>
					<td data-label="<fmt:message key="SysMenu.menuCode.title"/>"><c:out value='${item.menuCode}'/>&nbsp;</td>
					<td data-label="<fmt:message key="SysMenu.menuUrl.title"/>"><c:out value='${item.menuUrl}'/>&nbsp;</td>
					<td data-label="<fmt:message key="SysMenu.menuOrder.title"/>"><c:out value='${item.menuOrder}'/>&nbsp;</td>
					<td data-label="<fmt:message key="navigation.label.operation"/>">
					<c:if test="${item.hasSubMenu}">
						<a class="btn btn-mini btn-warning openclose" title="展开"  id="openclose-${item.id}" data-status="close"><i class="ace-icon fa fa-folder"></i></a>	
					</c:if>
						<a class="btn btn-mini btn-purple" title="图标"><i class='fa fa-picture-o'></i></a>			
						<a class="btn btn-mini btn-info editButton" title="编辑" id="${item.id }"><i class='fa fa-pencil-square-o'></i></a>	
						<a class="btn btn-mini btn-danger deleteButton" title="删除" id="delete-${item.id }"><i class='ace-icon glyphicon glyphicon-trash'></i></a>		
					</td>
				  </tr>
				  <c:forEach items="${item.subMenuList }" var="subMenu" varStatus="subStatus"> 
				  	<tr class="submenu-${item.id }" style="display:none">
						<td data-label="序号"></td>
						<td data-label="<fmt:message key="SysMenu.menuName.title"/>">|-<c:out value='${subMenu.menuName}'/>&nbsp;</td>
						<td data-label="<fmt:message key="SysMenu.menuCode.title"/>">|-<c:out value='${subMenu.menuCode}'/>&nbsp;</td>
						<td data-label="<fmt:message key="SysMenu.menuUrl.title"/>"><c:out value='${subMenu.menuUrl}'/>&nbsp;</td>
						<td data-label="<fmt:message key="SysMenu.menuOrder.title"/>"><c:out value='${subMenu.menuOrder}'/>&nbsp;</td>
						<td data-label="<fmt:message key="navigation.label.operation"/>">
						<c:if test="${subMenu.hasSubMenu}">
							<a class="btn btn-mini btn-warning openclose" title="展开"  id="openclose-${subMenu.id}" data-status="close"><i class="ace-icon fa fa-folder"></i></a>	
						</c:if>
							<a class="btn btn-mini btn-info editButton" title="编辑" id="${subMenu.id }"><i class='fa fa-pencil-square-o'></i></a>	
							<a class="btn btn-mini btn-danger deleteButton" title="删除" id="delete-${subMenu.id }"><i class='ace-icon glyphicon glyphicon-trash'></i></a>		
						</td>
					  </tr>
				  	<c:forEach items="${subMenu.subMenuList }" var="subSubMenu" > 
				  		<tr class="submenu-${subMenu.id }" style="display:none">
							<td data-label="序号"></td>
							<td data-label="<fmt:message key="SysMenu.menuName.title"/>">　|-<c:out value='${subSubMenu.menuName}'/>&nbsp;</td>
							<td data-label="<fmt:message key="SysMenu.menuCode.title"/>">　|-<c:out value='${subSubMenu.menuCode}'/>&nbsp;</td>
							<td data-label="<fmt:message key="SysMenu.menuUrl.title"/>"><c:out value='${subSubMenu.menuUrl}'/>&nbsp;</td>
							<td data-label="<fmt:message key="SysMenu.menuOrder.title"/>"><c:out value='${subSubMenu.menuOrder}'/>&nbsp;</td>
							<td data-label="<fmt:message key="navigation.label.operation"/>">
								<a class="btn btn-mini btn-info editButton" title="编辑" id="${subSubMenu.id }"><i class='fa fa-pencil-square-o'></i></a>	
								<a class="btn btn-mini btn-danger deleteButton" title="删除" id="delete-${subSubMenu.id }"><i class='ace-icon glyphicon glyphicon-trash'></i></a>		
							</td>
						  </tr>
				  	</c:forEach>
				  </c:forEach>
			</c:forEach>
		</tbody>
	</table>
	<div class="row">
	<div class="col-xs-12">
		<button type="button" class="btn btn-small btn-success" id="addMenu" style="margin-left:2px">新增</button>
	</div>
	<div id="afterupdate" style="display:block"></div>
	</div>
<script>	
$(".cdgl").addClass("active").parent("ul").parent("li").addClass("active open");
function addMenu(){
	
	}

function expand(className){
	$(className).show();
}
function close(className){
	$(className).hide()
}
jQuery(function($) {
	
	$(".openclose").click(function(){
		var status = $(this).attr("data-status");
		var id=$(this).attr("id").split("-")[1];
		
		if(status == "close"){
			$(".submenu-"+id).show();
			$(this).attr("data-status","open");
			$(this).children("i").removeClass("fa-folder").addClass("fa-folder-open")
			$(this).attr("title","收起")
		}else{
			$(".submenu-"+id).hide();
			$(this).attr("data-status","close");
			$(this).children("i").removeClass("fa-folder-open").addClass("fa-folder")
			$(this).attr("title","展开")
		}
	})
	$("#addMenu").click(function(){
		
		var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="新增菜单";
		 diag.URL = '${ctx}/menupopup/create';
		 diag.Width = 300;
		 diag.Height = 450;
		 diag.CancelEvent = function(){ //关闭事件
			 var afterupdate = diag.innerFrame.contentWindow.document.getElementById('afterupdate');
		 		if(afterupdate)
	 			{
		 			if(afterupdate.style.display == 'none'){
						setTimeout("location.reload()",100);
					}
	 			}					
				diag.close();
				diag.close();
			 };
		 diag.show();
	})
	
	$(".editButton").click(function(){
		var id = $(this).attr("id")
		var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="编辑菜单";
		 diag.URL = '${ctx}/menupopup/create?id='+id;
		 diag.Width = 300;
		 diag.Height = 450;
		 diag.CancelEvent = function(){ //关闭事件
			 var afterupdate = diag.innerFrame.contentWindow.document.getElementById('afterupdate');
		 		if(afterupdate)
	 			{
		 			if(afterupdate.style.display == 'none'){
						setTimeout("location.reload()",100);
					}
	 			}					
				diag.close();
				diag.close();
			 };
		 diag.show();
	})
	
	$(".deleteButton").click(function(){
		var id = $(this).attr("id").split("-")[1];
		if(confirm("确定进行删除操作吗？与其相关联的权限设置也会被清除")){
			$.ajax({
				url:"${ctx}/menupopup/delete",
				data:{
					id: id
				},
				type : 'post',
				dataType : 'json',
				success : function(data){
					if(data == "success"){
						alert("success");
						setTimeout("location.reload()",100);
						
					}
				},error : function(){
					alert("error");
				}
			})
		}
		
	})
	
})
</script>


</form:form>